<template>
	<view class="content">
		<view class="pageHeader">我的</view>
		<view class="myinfo-box">
			<image src="../../static/m-1.png" style="width: 100%;height: 370upx;"></image>
			<view class="infobox">
				<!-- 系统消息的展示 -->
				<view style="position: absolute;right:70upx;top:20upx;z-index: 999;"  @click="gopage(10)">
					<image src="../../static/m-2.png" style="height: 40upx;width: 40upx;"></image>
					<text class="littleBox msglettle" v-if="myinfo.common_message_total>0">{{myinfo.common_message_total}}</text>
				</view>
				<!-- 头部信息 -->
				<view style="position: relative;display: flex;align-items: center;font-size: 30upx;color: #fff;padding: 10upx 38upx;" @click="gopage(15)">
					<image :src="myinfo.avatar" style="width: 120upx;height: 120upx;border-radius: 50%;">
					</image>
					<view style="margin-left: 20upx;">
						<view>{{myinfo.nickname==""?myinfo.username:myinfo.nickname}}</view>
						<view style="margin-top:20upx;font-size: 24upx;">{{level_name}}</view>
					</view>
					
				</view>
				<view style="display: flex;padding: 0 20upx;margin-top: 20upx;">
					<view class="flex-item rightItem" @click="gopage(1)">
						<view>{{myinfo.balance}}</view>
						<view style="margin-top: 16upx;font-size: 28upx;">余额（元）</view>
					</view>
					<view class="flex-item  rightItem middleitem" @click="gopage(2)">
						<view>{{Number(myinfo.integral)+Number(myinfo.locking_integral)}}</view>
						<view style="margin-top: 16upx;font-size: 28upx;">VS</view>
					</view>
					<view class="flex-item rightItem" @click="gopage(3)">
						<view>{{myinfo.file}}</view>
						<view style="margin-top: 16upx;font-size: 28upx;">SDVS</view>
					</view>
					<view class="flex-item" @click="gopage(16)">
						<view>{{myinfo.user.pistachio}}</view>
						<view style="margin-top: 16upx;font-size: 28upx;">开心果</view>
					</view>
				</view>
			</view>
			<view style="background-color: #fff;">
				<view class="myorder">
					<view style="padding: 20upx 30upx;" @click="gopage(4,0)">
						<view style="display: flex;justify-content: space-between;font-size: 28upx;color: #333;position: relative;" class="myordertxt">
							<text>我的订单</text>
						</view>
					</view>
					<view style="border-top:2upx solid #eee;padding: 10upx 0 20upx;display: flex;font-size: 24upx;color: #666;">
						<view style="flex:1;text-align: center;position: relative;" @click="gopage(4,1)">
							<image src="../../static/m-4.png" class="orderimg"></image>
							<text>待付款</text>
							<text class="littleBox orlittle" v-show="waitorder.count>0">{{waitorder.count}}</text>
						</view>
						<view style="flex:1;text-align: center;position: relative;" @click="gopage(4,2)">
							<image src="../../static/m-5.png" class="orderimg"></image>
							<text>待发货</text>
							<text class="littleBox orlittle" v-show="wairdeliver.count>0">{{wairdeliver.count}}</text>
						</view>
						<view style="flex:1;text-align: center;position: relative;" @click="gopage(4,3)">
							<image src="../../static/m-6.png" class="orderimg"></image>
							<text>待收货</text>
							<text class="littleBox orlittle" v-show="waitreceive.count>0">{{waitreceive.count}}</text>
						</view>
						<view style="flex:1;text-align: center;" @click="gopage(4,4)">
							<image src="../../static/m-7.png" class="orderimg"></image>
							<text>已完成</text>
						</view>
						<view style="flex:1;text-align: center;" @click="gopage(4,7)">
							<image src="../../static/m-8.png" class="orderimg"></image>
							<text>退款/售后</text>
						</view>
					</view>
				</view>
			</view>
			
			<view style="background-color: #fff;padding: 10upx 30upx 0 50upx;font-size: 30upx;color: #666;">
				<view style="padding: 24upx 0;display: flex;justify-content: space-between;align-items: center;" @click="gopage(5)">
					<view style="display: flex;align-items: center;">
						<image src="../../static/m-9.png" style="width: 48upx;height: 42upx;margin-right: 22upx;"></image>
						我的团队
					</view>
					<image src="../../static/m-right.png" style="width: 12upx;height: 22upx;"></image>
				</view>
				<view style="padding: 24upx 0;display: flex;justify-content: space-between;align-items: center;" class="borderox"  @click="gopage(6)">
					<view style="display: flex;align-items: center;">
						<image src="../../static/m-10.png" style="width: 48upx;height: 42upx;margin-right: 22upx;"></image>
						我的收藏
					</view>
					<image src="../../static/m-right.png" style="width: 12upx;height: 22upx;"></image>
				</view>
				<view style="padding: 24upx 0;display: flex;justify-content: space-between;align-items: center;" class="borderox"  @click="gopage(17)">
					<view style="display: flex;align-items: center;">
						<image src="../../static/m-16.png" style="width: 48upx;height: 42upx;margin-right: 22upx;"></image>
						我的油卡
					</view>
					<image src="../../static/m-right.png" style="width: 12upx;height: 22upx;"></image>
				</view>
				<view style="padding: 24upx 0;display: flex;justify-content: space-between;align-items: center;" class="borderox"  @click="gopage(7)">
					<view style="display: flex;align-items: center;">
						<image src="../../static/m-11.png" style="width: 48upx;height: 42upx;margin-right: 22upx;"></image>
						抢购记录
					</view>
					<image src="../../static/m-right.png" style="width: 12upx;height: 22upx;"></image>
				</view>
				<view style="padding: 24upx 0;display: flex;justify-content: space-between;align-items: center;" class="borderox"  @click="gopage(14)">
					<view style="display: flex;align-items: center;">
						<image src="../../static/m-15.png" style="width: 48upx;height: 48upx;margin-right: 22upx;"></image>
						我的转让
					</view>
					<image src="../../static/m-right.png" style="width: 12upx;height: 22upx;"></image>
				</view>
				<view style="padding: 24upx 0;display: flex;justify-content: space-between;align-items: center;" class="borderox"  @click="gopage(12)">
					<view style="display: flex;align-items: center;">
						<image src="../../static/m-14.png" style="width: 36upx;height: 34upx;margin-right: 28upx;margin-left: 6upx;"></image>
						账号资金
					</view>
					<image src="../../static/m-right.png" style="width: 12upx;height: 22upx;"></image>
				</view>
			</view>
			
			<view style="background-color: #fff;padding: 10upx 30upx 0 50upx;font-size: 30upx;color: #666;margin-top: 24upx;">
				<view style="padding: 24upx 0;display: flex;justify-content: space-between;align-items: center;"  @click="gopage(13)">
					<view style="display: flex;align-items: center;">
						<image src="../../static/m-17.png" style="width: 48upx;height: 42upx;margin-right: 22upx;"></image>
						申请成为运营商
					</view>
					<image src="../../static/m-right.png" style="width: 12upx;height: 22upx;"></image>
				</view>
				<view style="padding: 24upx 0;display: flex;justify-content: space-between;align-items: center;" class="borderox"  @click="gopage(8)">
					<view style="display: flex;align-items: center;">
						
						<image src="../../static/m-12.png" style="width: 48upx;height: 42upx;margin-right: 22upx;"></image>
						我的地址
					</view>
					<image src="../../static/m-right.png" style="width: 12upx;height: 22upx;"></image>
				</view>
				
				<view style="padding: 24upx 0;display: flex;justify-content: space-between;align-items: center;" class="borderox"  @click="gopage(9)">
					<view style="display: flex;align-items: center;">
						<image src="../../static/m-13.png" style="width: 48upx;height: 42upx;margin-right: 22upx;"></image>
						设置
					</view>
					<image src="../../static/m-right.png" style="width: 12upx;height: 22upx;"></image>
				</view>
			</view>
			
		</view>
		
		
	</view>
			

</template>
<script>
	import postAjax from '../../API/postAjax.js'
	import {  
	        mapState,  
	        mapMutations  
	} from 'vuex';  
	export default {
		data(){
			return {
				userToken:'',
				myinfo:{},
				level_name:'普通会员',
				level_up:null,
				ordersort:[],// 订单分类
				waitorder:{},
				wairdeliver:{},
				waitreceive:{}
			}
		},
		onShow(){
			let that = this	
			that.userToken = uni.getStorageSync('token')
			that.getUserInfo()
		},
		methods: {
			...mapMutations(['users','companyphone']),
			// 获取个人信息
			getUserInfo(){
				let that = this
				postAjax('user/Center',{token:that.userToken},function(data){
					console.log(data)
					if(data.code==0){
						that.myinfo = data.data
						that.level_name=data.data.user.level_name
						that.level_up = data.data.user.level
						that.companyphone(data.data.customer_service_tel)
						that.ordersort = data.data.user_order_status
						// 代付款 代发货 待收货 已完成
						that.waitorder = that.ordersort[1]
						that.wairdeliver = that.ordersort[2]
						that.waitreceive = that.ordersort[3]
						that.users(that.myinfo)
					}else{
						that.getUserInfo()
					}
					
				})
			},
			// 获取等级身份
			leveList:function(){
				let that = this			
				postAjax('User/levelShow', {token:that.userToken}, function(data) {
									
					if (data.code == 0) {						
						that.level_name=data.data.level.grade_title										
						that.level_up = data.data.level.grade
					}else{
						that.leveList()
					}
				
				})
			},
			gopage(type,status){
				let that = this
				//1 余额 2VS 3 文件 4 订单列表 5 我的团队 6我的收藏 7抢购记录 8我的地址 9 设置
				if(type==1){
					uni.navigateTo({
						url:'../user/balance',
					})
				}
				if(type==2){
					uni.navigateTo({
						url:'../user/zhiyuan?integral='+that.myinfo.integral+'&locking_integral='+that.myinfo.locking_integral,
					})
				}
				if(type==3){
					uni.navigateTo({
						url:'../user/files?file='+that.myinfo.file
					})
				}
				if(type==4){
					if(status==7){
						uni.navigateTo({
							url:'../refund/index'
						})
					}
					if(status!==7){
						uni.navigateTo({
							url:'../user/index?state='+status
						})
					}
				}
				if(type==5){
					uni.navigateTo({
						url:'../user/team?id='+that.myinfo.id
					})
				}
				if(type==6){
					uni.navigateTo({
						url:'../user/collection'
					})
				}
				if(type==7){
					uni.navigateTo({
						url:'../user/salerecord'
					})
				}
				if(type==8){
					uni.navigateTo({
						url:'../user/address/index'
					})
				}
				if(type==9){
					uni.navigateTo({
						url:'../user/setting',
					})
				}
				// 账号资金
				if(type==12){
					uni.navigateTo({
						url:'../user/myaccount',
					})
				}
				if(type==10){
					uni.navigateTo({
						url:'../user/system/systemsg?common_message_total='+that.myinfo.common_message_total,
					})
				}
				if(type==13){
					if(this.level_up<3){
						uni.showToast({
							icon: 'none',
							title: '未达到创客身份，无法申请'
						});
						return
					}else{
						uni.navigateTo({
							url:'../user/apply',
						})	
					}
				}
				if(type==14){
					uni.navigateTo({
						url:'../user/transcord'
					})
				}
				if(type==15){
					uni.navigateTo({
						url:'../user/setting/person'
					})
				}
				if(type==16){
					uni.navigateTo({
						url:'../user/pistachio?pistachio='+that.myinfo.user.pistachio+'&used_pistachios='+that.myinfo.user.used_pistachios,
					})
				}
				if(type==17){
					uni.navigateTo({
						url:'../user/oilcard'
					})
				}
			}
		}
	}
</script>

<style>
.ornumber{}
.borderox{border-top:2upx solid #eee}
.content {min-height: 100vh;background-color: #F9F9F9;}
.pageHeader {position: relative;height:64px;background-color: #1D84E8;line-height: 64px;text-align: center;font-size: 36upx;color: #fff;padding-top:20px;}
.myinfo-box{position: relative;}
.infobox{position: absolute;width: 100%;top:0;left:0}
.littleBox{width: 28upx;height: 28upx;background-color: #EC6104;line-height: 28upx;text-align: center;color: #fff;font-size: 24upx;border-radius: 50%;position: absolute;}
.flex-item{flex:1;text-align: center;position: relative;color: #fff;font-size: 30upx;}
.msglettle{top:-4upx;right:-22upx;padding:2upx;}
.orlittle{top:0;right:22upx;padding:2upx;}
.orderimg{display: block;width: 70upx;height: 70upx;margin:0 auto 14upx;}
/* .middleitem::before{content: '';display: block;width: 2upx;background-color: rgb(255,255,255,.4);height: 100%;position: absolute;left: 0;top:0;} */
.rightItem::after{content: '';display: block;width: 2upx;background-color: rgb(255,255,255,.4);height: 100%;position: absolute;right: 0;top:0;}
.myorder{margin:-100upx 30upx 0;background-color: #fff;box-shadow: 0upx 1upx 20upx 8upx rgba(29,162,232,.1);position: relative;z-index: 999;border-radius: 30upx;}
.myordertxt:after{content: '';display: block;border-top:2upx solid #666;border-left: 2upx solid #666;width: 12upx;height: 12upx;transform: rotate(135deg);margin-top:12upx;}
</style>
